<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS书写位置-内部和外部写法</title>
    <style>
        span{color: red}
    </style>
</head>
<body>
<h4>书写位置</h4>
<p>
1.内部写法 <br>
直接写在html文件里，用script标签包住 <br>
规范：script标签写在 < /body> 上面
</p>
<p>
2.外部写法 (加载) <br>
代码写在以.js结尾的文件里 <br>
语法：通过script标签，引入到html页面中。 <br>
<span> 注意:外部加载文件 script 标签中间无需写代码，写了也会被忽略！</span>
</p>
<p>
特别说明: <br>
我们将 < script> 放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。 <br>
如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。 <br>
因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略
</p>
<p>
3. 内联 JavaScr <br>
代码写在标签内部 <br>
内联写法了解即可 开发一般不用，但是后面vue框架会用这种模式
</p>
<hr>
<!--演示-->

<!-- 1.js内部写法 -->
<script>
    // 标签中间写JS代码
    alert('我是内部写法,代码') //这里效果是, 页面弹出警示框
</script>

<!-- 2.js外部加载文件 -->
<script src="./外部文件.js">
    // 中间不要写内容,就是写了也会被忽略
</script>

<!-- 3.内联写法,JS代码写在标题里面 -->
<button onclick="alert('这个是内联写法')">点击</button>

<!--特别在说明: JS代码和文件,一般在整个网页内容的最下面-->
</body>
</html>